<template>
  <div class="app-container">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
            查看已删门店
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-date-picker :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.gift_id" placeholder="输入礼品编号或神采编号"></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
        <el-form-item class="pull-right">
          <el-button type="primary" @click="exportClick" :loading="exportLoading">报表导出
            <count-down ref="cd" />
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" prop="store_name" label="门店"></el-table-column>
        <el-table-column align="center" prop="name" label="礼品名称"></el-table-column>
        <el-table-column align="center" prop="gift_id" label="礼品编号"></el-table-column>
        <el-table-column align="center" prop="no_obsolete" label="神采编号"></el-table-column>
        <el-table-column align="center" prop="type_name" label="类别"></el-table-column>
        <el-table-column align="center" prop="srpplier_name" label="供应商"></el-table-column>
        <el-table-column align="center" prop="ticket_value" label="非会员票值"></el-table-column>
        <el-table-column align="center" prop="money_cost" label="成本价"></el-table-column>
        <el-table-column align="center" prop="all_in" label="总入库数"></el-table-column>
        <el-table-column align="center" prop="platform_transfer_in_num" label="跨平台调入数"></el-table-column>
        <el-table-column align="center" prop="purchase_in_num" label="采购数"></el-table-column>
        <el-table-column align="center" prop="transfer_in_num" label="店外调入数"></el-table-column>
        <el-table-column align="center" prop="adjust_in_num" label="调整入库数"></el-table-column>
        <el-table-column align="center" prop="all_out" label="总出库数"></el-table-column>
        <el-table-column align="center" prop="check_surplus_out_num" label="盘盈"></el-table-column>
        <el-table-column align="center" prop="check_deficient_out_num" label="盘亏"></el-table-column>
        <el-table-column align="center" prop="transfer_out_num" label="店外调出数"></el-table-column>
        <el-table-column align="center" prop="platform_transfer_out_num" label="跨平台调出数"></el-table-column>
        <el-table-column align="center" prop="main_house_others_out_num" label="总仓杂项出货"></el-table-column>
        <el-table-column align="center" prop="activities_house_others_out_num" label="企划中转仓杂项出货" width="90">
        </el-table-column>
        <el-table-column align="center" prop="po_house_others_out_num" label="破损礼品出货"></el-table-column>
        <el-table-column align="center" prop="adjust_out_num" label="调整出库数"></el-table-column>
        <el-table-column align="center" prop="gift_exchange_out_num" label="礼品柜出货"></el-table-column>
        <el-table-column align="center" prop="machine_out_num" label="机台出货"></el-table-column>
        <el-table-column align="center" prop="gift_sale_out_num" label="前台销售数"></el-table-column>
        <el-table-column align="center" prop="internal_buy_out_num" label="员工内购数"></el-table-column>
        <el-table-column align="center" prop="return_num" label="退货数"></el-table-column>
        <el-table-column align="center" prop="all_num" label="总库存数"></el-table-column>
        <el-table-column align="center" prop="main_house_num" label="门店主仓"></el-table-column>
        <el-table-column align="center" prop="machine_num" label="机台仓"></el-table-column>
        <el-table-column align="center" prop="gift_ark_house_num" label="礼品柜中转仓"></el-table-column>
        <el-table-column align="center" prop="gift_machine_house_num" label="礼品机中转仓"></el-table-column>
        <el-table-column align="center" prop="internal_house_num" label="员工内买仓"></el-table-column>
        <el-table-column align="center" prop="bad_house_num" label="破损礼品中转仓"></el-table-column>
        <el-table-column align="center" prop="activities_house_num" label="企划中转仓"></el-table-column>
        <el-table-column align="center" prop="booth_house_num" label="摊位机中转仓"></el-table-column>
        <el-table-column align="center" prop="sale_house_num" label="前台销售仓"></el-table-column>
        <el-table-column align="center" prop="card_ticket_house_num" label="财务卡票仓"></el-table-column>
        <el-table-column align="center" prop="in_house_day" label="在库天数"></el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getPage, getList, getStoreList, getExport } from '@/api/storage_control/gift_inventory_form';
import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
export default {
  data() {
    return {
      exportLoading: false,
      currentPage: 1,
      totalDataNumber: 1,
      list: [],
      listLoading: false,
      storeList: null,
      all_gift: [],
      formInline: {
        store_id: '',
        begin_time: '',
        end_time: '',
        gift_id: '',
        look_del: '0'
      },
      pickerOptions: pickerOptionsF(-1),
      pickerDate: pickerDateF(-1, -1)
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.storeList) {
        vm.getStore();
      }
    });
  },
  methods: {
    lookDelChange() {
      this.getStore();
    },
    getStore() {
      getStoreList({ look_del: this.formInline.look_del, category_id: 364 }).then(response => {
        if (response.length > 1) {
          response.unshift({ id: 0, name: '全部' });
        }
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else {
          if (this.storeList.length > 0) {
            this.formInline.store_id = this.storeList[1].id;
          }
        }
      });
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchPage();
      });
    },
    exportClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        getExport(this.formInline);
        this.exportLoading = true;
        this.$refs.cd.countDownF(30).then(() => {
          this.exportLoading = false;
        });
      });
    },
    fetchPage() {
      if (this.formInline.store_id == 0 && this.formInline.gift_id == '') {
        this.$message.error('请输入礼品编号或神采编号后再进行搜索');
        return;
      }
      this.listLoading = true;
      getPage(this.formInline).then(response => {
        this.totalDataNumber = response.length;
        this.all_gift = response;
        this.fetchData(1);
      });
    },
    // 分页
    handleCurrentChange(val) {
      this.fetchData(val);
    },
    fetchData(val = '') {
      //es6默认值
      if (this.all_gift.length == 0) {
        this.list = [];
        this.listLoading = false;
        return;
      }

      let data = JSON.parse(JSON.stringify(this.formInline));
      data.gift_id = this.all_gift.slice((val - 1) * 20, val * 20);
      this.listLoading = true;
      getList(data, val)
        .then(response => {
          response.forEach(val => {
            val.money_cost = (val.money_cost / 1000000).toFixed(2) * 1;
            val.type_name = `${val.type_name1}/${val.type_name2}/${val.type_name3}`;
            val.machine_out_num = val.machine_out_num * 1 + val.booth_machine_out * 1;
            val.all_in = val.adjust_in_num * 1 + val.purchase_in_num * 1 + val.transfer_in_num * 1 + val.platform_transfer_in_num * 1;
            val.all_out =
              val.transfer_out_num * 1 +
              val.main_house_others_out_num * 1 +
              val.activities_house_others_out_num * 1 +
              val.gift_exchange_out_num * 1 +
              val.machine_out_num * 1 +
              val.gift_sale_out_num * 1 +
              val.internal_buy_out_num * 1 +
              val.platform_transfer_out_num * 1 +
              val.adjust_out_num * 1 +
              val.po_house_others_out_num * 1 +
              val.return_num * 1;
            val.all_num =
              val.main_house_num * 1 +
              val.machine_num * 1 +
              val.gift_ark_house_num * 1 +
              val.gift_machine_house_num * 1 +
              val.internal_house_num * 1 +
              val.bad_house_num * 1 +
              val.activities_house_num * 1 +
              val.sale_house_num * 1 +
              val.card_ticket_house_num * 1 +
              val.booth_house_num * 1;
          });
          this.list = response;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>